<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="font_c2am3mt5e6e/iconfont.css"/>
  <link rel="stylesheet" type="text/css" href="CSS/search.css"/>
  <style>
      body{
          background:url("picture/1.jpg") no-repeat;
          background-position-y: -120px;
      }
    input{
      width: 300px;
      height: 40px;
    }
    .layui-table-cell{
        height:auto;
        max-width: 100%;
        overflow: visible;
        text-align: center;
        white-space: normal;
    }
  </style>
</head>
<body>
<body>
<div class="search-header">
	<div class="search-list">
	<input type="search" placeholder="输入图书id" id="id" style="margin: 0 auto">
    <button type="button" class="btn" style="margin: 0 auto"><i class="iconfont">&#xe609;</i></button>
	</div>
</div>	
<table class="layui-hide" id="test"></table>

<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
  var btn=document.querySelector('.btn')
  var input=document.querySelector('input')
  btn.onclick=function (){
    layui.use('table', function(){
      var table = layui.table;
      table.render({
        elem: '#test'
        ,url: 'http://8.130.14.155:8080/user/sele/'+input.value
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
          {field:'id', width:80, title: 'ID', sort: true}
          ,{field:'title', width:120, title: '书名'}
              ,{field:'cover', width:120, title: '图片',templet:'<div><img src="{{d.cover}}" alt=""></div>'}
          ,{field:'author', width:120, title: '作者名'}
          ,{field:'date', width:120, title: '出版日期'}
          ,{field:'press', title: '出版社', width: 120, minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'abs', title: '简介'}
        ]]
        ,parseData: function(res){ //res 即为原始返回的数据
          return {
            "code": 0, //解析接口状态
            "msg": "", //解析提示文本
            "count": 100, //解析数据长度
            "data": res.data //解析数据列表
          };

        }
      })
    })
  }


</script>
</body>
</body>
</html>


